<template>
  <div>
    <div id="mininav">
      <router-link to="/">首页</router-link>
      <router-link to="/project">项目</router-link>
      <router-link to="/graphicdesign">设计</router-link>
      <!-- <router-link to="/behowto">FROMHeart</router-link> -->
    </div>
  </div>
</template>

<script>

</script>

<style>

#logo {
  width: 40px;
  margin-bottom: 20px;
}
#mininav {
  padding: 30px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
}

#mininav a {
  font-size: 10px;
  font-weight: 400;
  margin: 2px;
  padding-bottom: 2px;
  color: #000000;
  text-decoration: none;
}

#mininav a.router-link-exact-active {
  color: #000000;
  font-weight: 600;
}

@media only screen and (max-width: 767px) {

#mininav {
  padding: 30px;
  display: flex;
  height: 100px;
  flex-direction: column;
  align-items: flex-start;
}
}

</style>
